<template>
  <el-dialog title="编辑"
             v-model="visible"
             @close="close"
             :close-on-click-modal="false"
             class="form">
    <el-form :model="formData" ref="formRef"  label-width="100">
      <el-form-item label="颜色名称" prop="color">
        <el-input v-model="formData.color" placeholder="请输入名称"/>
      </el-form-item>
      <el-form-item label="是否使用" prop="status">
        <el-select v-model="formData.status"
                   placeholder="使用状态">
          <el-option v-for="item in Dic.isShow()"
                     :key="item.value"
                     :label="item.text"
                     :value="item.value"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="saveOrUpdate" type="success">提交</el-button>
      <el-button @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import Dic from "@/utils/dic"
import goodsApi from "@/api/goods";
import type {FormInstance} from 'element-plus'
import {ref} from "vue";

export default {
  name: "colorListDetail",
  props: {
    modelValue: {},
    info: {},
    close: {
      required: true,
      type: Function,
    },
    refresh: {
      required: true,
      type: Function,
    }
  },
  setup() {
    const formRef = ref<FormInstance>();
    return {formRef}
  },
  data() {
    return {
      Dic,
      visible: false,
      formData: {
        color: "",
        status: 1,
      },
    };
  },
  watch: {
    modelValue(value) {
      this.visible = value
      if (this.info.id) {
        this.$nextTick(() => {
          this.formData = {...this.info};
        })
      }
      if (this.formRef) {
        this.formRef.resetFields()
      }
    },
  },
  methods: {
    saveOrUpdate() {
      goodsApi.colorSave(this.formData).then(res => {
        if (res.flag) {
          this.close();
          this.refresh();
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cell-item {
  display: flex;
  align-items: center;
}
</style>